<template>
	<view class="contain">
		<view class="flex flex-col whitebg">
			<view class="flex justify-between usename">
				<view><text>消费站点</text></view>
				<view class="flex justify-start blod"><u-icon name="map-fill" color="#FF6600" size="22"></u-icon> 湛江人人欢购有限公司</view>
			</view>
			<u-divider></u-divider>
			<view class="w-full text-right blod">初始等级</view>
		</view>
		<view class="flex flex-col whitebg">
			<view class="flex justify-between usename" @click="showSelectPay">
				<view><text>枪号</text></view>
				<view class="flex justify-start blod">{{selectname}} <u-icon name="arrow-right" color="#ccc" size="22"></u-icon></view>
			</view>
		</view>
		
		<!-- 显示金额 -->
		<view class="flex justify-between whitebg" v-if="showmoney">
			<view class="w-[300rpx] flex flex-col justify-center">
				<view class="w-full text-center"><text>时间</text></view>
				<view class="w-full text-center mt-2"><text class="blod black small">2024-12-04 18:18:20</text></view>
			</view>
			<view class="w-[200rpx] flex flex-col justify-center">
				<view class="w-full text-center"><text>数量</text></view>
				<view class="w-full text-center mt-2"><text class="blod black small">{{buynum}}</text></view>
			</view>
			<view class="w-[200rpx] flex flex-col justify-center">
				<view class="w-full text-center"><text>金额</text></view>
				<view class="w-full text-center mt-2"><text class="blod red mid">￥{{originPrice}}</text></view>
			</view>
		</view>
		
		<block v-if="showmoney && userData.jifen>0">
			   <view class="flex justify-between items-center pl-2 pr-2 whitebg totalprice">
				   <view class="w-[70%]">我的可用积分<text class="text-xl text-green-500 font-bold">{{originJF}}</text></view>
				   <view class="w-full flex flex-col items-center">
					   <view class="w-full flex justify-end"><text class="small">使用积分抵扣</text></view>
					   <view class="w-full flex justify-end mt-1"><u-switch v-model="isUseJF" @change="useChange" activeColor="#3C9CFF"></u-switch></view>
				   </view>
			   </view>
			   <view class="flex justify-between items-center pl-2 pr-2 whitebg totalprice" v-if="isUseJF">
			   		   <view class="w-[70%]">本次可抵扣</view>
			   		   <view class="w-full flex flex-col items-center">
			   			   <view class="w-full flex justify-end"><text class="big blod text-green-500">-￥{{showDiKouOriginJF}}</text></view>
			   		   </view>
			   </view>
			   <u-divider></u-divider>
		</block>
		
	   <view class="flex justify-between items-center pl-2 pr-2 whitebg totalprice">
		   <view class="w-[70%]">实际支付</view>
		   <view class="w-full flex flex-col items-center">
			   <view class="w-full flex justify-end"><text class="big blod red">￥{{realpay}}</text></view>
		   </view>
	   </view>
	   <u-divider></u-divider>
	   
	   <!-- 加油不赠送积分 -->
	   <!-- <view class="flex justify-between items-center pl-2 pr-2 whitebg totalprice">
	   		   <view class="w-[50%]">消费赠送</view>
	   		   <view class="w-full flex flex-col items-center">
	   			   <view class="w-full flex justify-end"><text class="mid text-green-500">本次消费赠送{{realpay}}的油卡积分</text></view>
	   		   </view>
	   </view> -->
	   <u-divider></u-divider>
		
		
		<view class="flex flex-col whitebg">
			<view class="flex justify-between usename">
				<view class="flex justify-start">
					<view><u-icon name="weixin-circle-fill" color="#00a100" size="28"></u-icon></view>
					<view class="relative top-[6rpx]"><text class="mid blod ml-2">微信支付</text></view>
				</view>
				<view>
					 <u-checkbox activeColor="#FF6600" iconSize="22" shape="circle" size="25" :checked="wxpayCheck"></u-checkbox>
				</view>
			</view>
		</view>
		
		
		<view class="mt-5 paybtn">
			<u-button type="primary" text="确定支付" @click="startPay"></u-button>
		</view>
		
		
		<!-- 加油枪弹出层 -->
		<view class="popuDiv">
			<u-popup :show="popshow" @close="popclose" @open="popopen" :closeOnClickOverlay="true" :customStyle="customstyle" mode="bottom">
				<view class="flex flex-col justify-start items-center content">
					<view class="w-full flex justify-center"><text class="blod">请选择抢号</text></view>
					<view class="flex justify-between flex-wrap mt-3 selectGun">
						 <view class="w-[23.5%] flex flex-col items-center mb-3 itemBox" @click="selectthis(item,'(#95)')" v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]">
							 <view class="fontcolor blod">{{item}}号枪</view>
							 <view class="fontcolor small">(#95)</view>
						 </view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup lang='ts'>
	
	import { ref,reactive } from 'vue'
	import { userStore } from '@/stores/userStore'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { Date_C,GenerateOrderNo } from '@/common/date.js'
	/* import tools from '@/common/tools' */
	let { hasLogin,userData } = userStore();
	const store = userStore()
	
	let wxpayCheck=ref(true);
	
	let selectname=ref('请选择抢号');
	let showmoney=ref(false);
	let sheng=ref(7.56);
	let buynum=ref(300);
	let originPrice=ref(0);
	let realpay=ref(0);
	let canPay=ref(false);
	
	let isUseJF=ref(true);
	let isClose=ref(false);
	let diffMoney=ref(0);
	
	let originJF=ref(0);  //1个备份
	let showDiKouOriginJF=ref(0); //1个显示
	let rate=ref(0.1); //10% 每次扣除 我的积分*10%
	
	//显示枪号
	let popshow=ref(true);
	
	let jiayouPayInfo=reactive({
		JYsiteInfo:null,
		orderNo:'',
		siteName:'湛江人人欢购有限公司',
		userLv:'初始等级',
		gunInfo:'2号枪(#95),单价￥9/升',
		time:'2024-12-04 18:18:20',
		buyNumber:300,
		originPrice:0,
		isUseJF:true,
		jifen:0,
		diKouJF:0,
		realPay:2682
	});
	
	const customstyle=reactive({
		"border-radius":"20rpx 20rpx 0 0"
	});
	
	
const useChange=(e:any)=>{
	if(userData.jifen<0){
		isUseJF.value=false;
		isClose.value=true;
		uni.$tools.Toast("积分不足无法抵扣");
		return false;
	}
	console.log("是否使用积分抵扣",e);
	uni.showModal({
		title:"温馨提示",
		content:isUseJF.value?"是否使用积分抵扣":"是否取消积分抵扣",
		success:res=>{
			if(res.confirm){
				if(isClose.value){
					isUseJF.value=true;
					isClose.value=false;
					console.log("使用积分1")
					userData.jifen=originJF.value; //还原积分
					let diKou=Math.floor(originPrice.value*rate.value);
					realpay.value=originPrice.value-diKou;
					if(realpay.value<=0) realpay.value=0;
					console.log("realpay.value===》",realpay.value);
					userData.jifen-=diKou;
					//if(diKou>originPrice.value) diKou=originPrice.value; //抵扣 > 原价
					showDiKouOriginJF.value=diKou;
				}else{
					isUseJF.value=false;
					isClose.value=true;
					console.log("取消积分抵扣")	
					realpay.value=originPrice.value;
					userData.jifen=originJF.value;
				}
			}else{
				if(isClose.value){
					isUseJF.value=false;
					isClose.value=true;
					console.log("取消积分抵扣")	
					realpay.value=originPrice.value;
					userData.jifen=originJF.value;
				}else{
					isUseJF.value=true;
					isClose.value=false;	
					console.log("使用积分2")	
					userData.jifen=originJF.value; //还原积分
					let diKou=Math.floor(originPrice.value*rate.value);
					realpay.value=originPrice.value-diKou;
					if(realpay.value<=0) realpay.value=0;
					userData.jifen-=diKou;
					//if(diKou>originPrice.value) diKou=originPrice.value; //抵扣 > 原价
					showDiKouOriginJF.value=diKou;
				}
			}
			uni.setStorageSync("userData",userData);
		},
	})
}
	
	const showSelectPay=()=>{
		popopen();
	}
	
	const popclose=()=>{
		popshow.value=false;
	}
	const popopen=()=>{
		popshow.value=true;
	}
	const selectthis=(number:string,oilname:string)=>{
		let m=Math.floor((sheng.value+parseFloat(number)));
		originPrice.value=buynum.value*m;
		jiayouPayInfo.originPrice=originPrice.value;
		jiayouPayInfo.jifen=userData.jifen;
		if(isUseJF.value){
			realpay.value=buynum.value*m-userData.jifen;
		}else{
			realpay.value=buynum.value*m;
		}
		if(realpay.value<=0) realpay.value=0;
		selectname.value=number+"号枪"+oilname+",单价￥"+m+"/升";
		jiayouPayInfo.gunInfo=selectname.value;
		showmoney.value=true;
		canPay.value=true;
		//*/
		
		let dikou=Math.floor(originPrice.value*rate.value);
		//if(dikou>originPrice.value) dikou=originPrice.value; //抵扣 > 原价
		showDiKouOriginJF.value=dikou;
		
		realpay.value=originPrice.value-dikou;
		if(realpay.value<=0) realpay.value=0;
		jiayouPayInfo.realPay=realpay.value;
		
		popclose();
	}
	
	const startPay=()=>{
		if(!canPay.value){
			uni.$tools.Toast("请选择抢号");
			showSelectPay();
			return;
		}
		uni.setStorageSync("userData",userData);
		jiayouPayInfo.orderNo=GenerateOrderNo();
		jiayouPayInfo.time=Date_C();
		jiayouPayInfo.diKouJF=showDiKouOriginJF.value;
		jiayouPayInfo.realPay=realpay.value;
		uni.$tools.Toast("已成功支付"+realpay.value.toString()+"元");
		uni.setStorageSync("jiayouPayInfo",jiayouPayInfo);
		setTimeout(()=>{
			uni.hideLoading();
			//uni.$tools.Toast("演示完成");
			uni.$tools.GoUrl("/pages/shop_allorder/shop_allorder");
		},1500);
	}
	
	
	onShow(()=>{
		userData.jifen=store.getjifen(); //实时更新缓存
		originJF.value=Math.floor(userData.jifen);
		let JYsiteInfo=uni.getStorageSync("JYsiteInfo") || null;
		if(JYsiteInfo!=null){
			jiayouPayInfo.JYsiteInfo=JYsiteInfo;
		}
		console.log("userData.jifen",userData.jifen);
		console.log("showmoney",showmoney.value);
	});
	
</script>
<style>
	page{
		background:#f0f0f0;
	}
</style>
<style lang='scss' scoped>
	@import "shop_jiayou.scss";
</style>